<template>
  <i-row>
    <i-col v-for="(item, index) in menuList" :key="index" span="8">
      <div class="col-item" @click="navigatePage(item.url)">
        <i :class="item.iconClass"></i>
        <span>{{ item.text }}</span>
      </div>
    </i-col>
  </i-row>
</template>

<script>
  export default {
    data () {
      return {
        menuList: [{
          iconClass: 'fa fa-rocket',
          text: '学英语',
          url: '/pages/single-function/englishs/main'
        }, {
          iconClass: 'fa fa-universal-access',
          text: '成语典故',
          url: '/pages/single-function/universals/main'
        },
        // {
        //   iconClass: 'fa fa-globe',
        //   text: '国际新闻',
        //   url: '/pages/single-function/internations/main'
        // }, 
        {
          iconClass: 'fa fa-list-alt',
          text: '唐诗三百首',
          url: '/pages/single-function/poems/main'
        }, {
          iconClass: 'fa fa-id-card-o',
          text: '网络取名',
          url: '/pages/single-function/names/main'
        }, {
          iconClass: 'fa fa-deaf',
          text: '绕口令',
          url: '/pages/single-function/tongues/main'

        }, {
          iconClass: 'fa fa-hourglass-start',
          text: '历史的今天',
          url: '/pages/single-function/histories/main'
        }, 
        // {
        //   iconClass: 'fa fa-shopping-basket',
        //   text: '菜谱查询'
        // }
        ]
      }
    },
    methods: {
      navigatePage (url) {
        wx.navigateTo({ url })
      },
    },
  }
</script>

<style scoped>
.col-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  height: 200rpx;
}
.col-item > span {
  margin-top: 10px;
  font-size: 14px;
}
</style>